<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>八项抽奖系统</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #f0f0f0;
            min-height: 100vh;
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        #container {
            width: 90%;
            max-width: 800px;
            height: 300px;
            background: white;
            border-radius: 20px;
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            justify-content: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        .prize-box {
            width: 22%;
            height: 45%;
            background: #87CEEB;
            border-radius: 50%/30%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2em;
            color: #333;
            transition: all 0.3s;
            border: 2px solid transparent;
        }

        .active {
            box-shadow: 0 0 15px 5px gold;
            border-color: gold;
        }

        .disabled {
            background: #DDDDDD !important;
            color: #999 !important;
        }

        @keyframes blink {
            0% { box-shadow: 0 0 15px 5px gold; }
            50% { box-shadow: 0 0 25px 10px gold; }
            100% { box-shadow: 0 0 15px 5px gold; }
        }

        .blink {
            animation: blink 0.5s infinite;
        }

        .controls {
            margin-top: 30px;
            display: flex;
            gap: 20px;
        }

        button {
            padding: 12px 30px;
            font-size: 1.2em;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            background: #4CAF50;
            color: white;
            transition: all 0.3s;
        }

        button:hover {
            transform: scale(1.05);
        }

        #result {
            margin-top: 20px;
            font-size: 1.5em;
            height: 30px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="prize-box">一等奖</div>
        <div class="prize-box">二等奖</div>
        <div class="prize-box">三等奖</div>
        <div class="prize-box">四等奖</div>
        <div class="prize-box">五等奖</div>
        <div class="prize-box">六等奖</div>
        <div class="prize-box">七等奖</div>
        <div class="prize-box">八等奖</div>
    </div>

    <div class="controls">
        <button onclick="startLottery()">开始抽奖</button>
        <button onclick="reset()">重置</button>
    </div>
    <div id="result"></div>

    <script>
        let isRunning = false;
        let currentActive = null;
        let availableBoxes = [];
        let finalResult = null;
        let intervalId = null;
        let timeoutId = null;

        function getAvailableBoxes() {
            return Array.from(document.querySelectorAll('.prize-box:not(.disabled)'));
        }

        function startLottery() {
            if(isRunning || getAvailableBoxes().length === 0) return;
            
            isRunning = true;
            availableBoxes = getAvailableBoxes();
            document.getElementById('result').textContent = '';
            
            // 随机闪烁阶段
            intervalId = setInterval(() => {
                if(currentActive) {
                    currentActive.classList.remove('active');
                }
                currentActive = availableBoxes[Math.floor(Math.random() * availableBoxes.length)];
                currentActive.classList.add('active');
            }, 200);

            // 四秒后停止
            setTimeout(() => {
                clearInterval(intervalId);
                if(currentActive) currentActive.classList.remove('active');
                
                // 确定最终结果
                finalResult = availableBoxes[Math.floor(Math.random() * availableBoxes.length)];
                finalResult.classList.add('blink');
                document.getElementById('result').textContent = `抽中结果：${finalResult.textContent}`;
                
                // 两秒后禁用
                timeoutId = setTimeout(() => {
                    finalResult.classList.remove('blink');
                    finalResult.classList.add('disabled');
                    isRunning = false;
                }, 2000);
            }, 4000);
        }

        function reset() {
            clearInterval(intervalId);
            clearTimeout(timeoutId);
            document.querySelectorAll('.prize-box').forEach(box => {
                box.classList.remove('active', 'blink', 'disabled');
            });
            document.getElementById('result').textContent = '';
            isRunning = false;
            availableBoxes = [];
            finalResult = null;
        }
    </script>
</body>
</html>